<template>
<div class="imagebox" :style="styleColor">
  <img
      :style="imgStyle"
      :src="imageAdress"
      alt=""
    />
</div>
</template>

<script>
export default {
  name: 'widgetDevice9',
  props: {
    value: Object,
    ispreview: Boolean
  },
  components: {},
  data() {
    return {
      fanStatus:false,
      options: {},
      imageAdress:require('../../image/通风风扇.svg')
    }
  },
  computed: {
    imgStyle() {
      let animationName = this.transStyle.rotateDirection?'widgetDevice9-rotate':'widgetDevice9-rotate2'
      this.fanStatus?'':animationName = ''
      return {
        width:'100%',
        height:'100%',
        opacity: this.transStyle.transparency / 100,
        transform: `scaleX(${this.transStyle.leftRightImage?'-1':'1'}) scaleY(${this.transStyle.topButtomImage?'-1':'1'})`,
        animation: `${animationName} ${this.transStyle.rotateSpeed}s linear infinite`
      };
    },
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        background: this.transStyle.background,
        "text-align": this.transStyle.textAlign,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px"
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.setOptions();
      },
      deep: true
    }
  },
  created() {
    this.options = this.value;
  },
  mounted() {
    this.setOptions();
  },
  methods: {
    setOptions() {
      const optionsData = this.value.data;
      return optionsData.dataType == "staticData"
        ? this.staticData(optionsData.staticData)
        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
    },
    staticData(data) {
      this.fanStatus = data[0].status;
    },
      //动态数据字典解析
      dynamicDataFn(val, refreshTime) {
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      const data = this.queryEchartsData(val);
      data.then((res) => {
        this.renderingFn(res);
      });
    },
    renderingFn(val) {
      this.fanStatus = val[0].value;
    },
  }
}
</script>

<style lang="scss" scoped>
.imagebox {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


</style>

<style lang="scss">
  @keyframes widgetDevice9-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes widgetDevice9-rotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
</style>
